// 定义一个 React 组件 并在渲染。
import React from 'react';

class App extends React.Component {
  // 1 在构造函数里添加 state = {}
  constructor() {
    super();
    // 添加类组件的状态
    this.state = {
      counter: 0,
      ui: <div>我是state中定义的jsx</div>,
    };
  }

  // 类的公有实例字段方式
  // state = {
  //   counter: 10,
  // };

  // 定义点击的事件处理函数
  handleClick(e) {
    // 修改页面数据
    console.log('===>', this);
    this.setState({ counter: this.state.counter + 1 });
  }

  render() {
    // console.log(this);
    return (
      <div>
        <h2>{this.state.counter}</h2>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

export default App;
